<nz-layout>
    <nz-header><h1>Moi Kiitos</h1></nz-header>
    <nz-content>
        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" nzRequired>
                  <span>
                    Username
                    <i nz-icon nz-tooltip nzTitle="What do you want other to call you" nzType="question-circle" nzTheme="outline"></i>
                  </span>
                </nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your username!">
                  <input nz-input id="username" formControlName="username" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid E-mail!">
                <input nz-input formControlName="email" id="email" />
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your password!">
                <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()" />
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
                <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
                <ng-template #errorTpl let-control>
                  <ng-container *ngIf="control.hasError('required')">
                    Please confirm your password!
                  </ng-container>
                  <ng-container *ngIf="control.hasError('confirm')">
                    Two passwords that you enter is inconsistent!
                  </ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>
            <!-- <nz-form-item nz-row class="register-area">
              <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <label nz-checkbox formControlName="agree">
                  <span>I have read the <a>agreement</a></span>
                </label>
              </nz-form-control>
            </nz-form-item> -->
            <nz-form-item nz-row class="register-area">
              <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary">Register</button>
                 Or<a routerLink="/user/login"> you have account login</a>
              </nz-form-control>
            </nz-form-item>
          </form>
    </nz-content>
    <nz-footer>Powered By Chen Lin</nz-footer>
  </nz-layout>